import React, { FC } from 'react'
import './index.less'
import { Col, Row } from 'antd';
import { addThousandSeparator } from '@/utils'
import MyIcon from '@/components/Myicon';
interface CardProps {
    title?: string,
    colortype?: string,
    children?: React.ReactNode
    colSpan?: number,
    icon?: string,
    mainInfo?: {
        m_value?: string,
        m_unit?: string,
        m_title?: string
    },
    subinfo?: {
        m_value?: string,
        m_unit?: string,
        m_title?: string
    },
    subinfoother?: {
        m_value?: string,
        m_unit?: string,
        m_title?: string
    }
}
const CardColor: FC<CardProps> = (props: CardProps) => {
    const {
        title = '',
        colortype = '1',
        children,
        colSpan = 24,
        icon = '',
        mainInfo = {

        },
        subinfo = {

        },
        subinfoother = {

        }
    } = props
    return <div className={'CardColor CardColor' + colortype}>
        {
            icon && <div className='icon'><MyIcon type={icon} /></div>
        }

        <Row style={{ zIndex: '10' }}>
            <Col span={colSpan}>
                <div className='MainInfo'>
                    <div className='MainInfoTitle'>{title || mainInfo?.m_title}</div>
                    <div className='MainInfoContent'>
                        <span className='MainInfoContentValue'>{addThousandSeparator(mainInfo?.m_value) || '??'}</span>
                        <span className='MainInfoContentUnit'>{mainInfo?.m_unit || '??'}</span>
                    </div>
                </div>

                <div className='SubInfo'>
                    <div className='SubInfoTitle'>{subinfo?.m_title || '??'}</div>
                    <div className='SubInfoContent'>
                        <span className='SubInfoContentValue'>{addThousandSeparator(subinfo?.m_value) || '??'}</span>
                        <span className='SubInfoContentUnit'>{subinfo?.m_unit || '??'}</span>
                    </div>
                </div>

                <div className='SubInfoOther'>
                    <div className='SubInfoTitle'>{subinfoother?.m_title || '??'}</div>
                    <div className='SubInfoContent'>
                        <span className='SubInfoContentValue'>{addThousandSeparator(subinfoother?.m_value) || '??'}</span>
                        <span className='SubInfoContentUnit'>{subinfoother?.m_unit || '??'}</span>
                    </div>
                </div>
            </Col>
            {
                children !== undefined && <Col span={24 - colSpan}>
                    {
                        children
                    }
                </Col>
            }
        </Row>

    </div >
}


export default CardColor;